{layout '../Public/layoutForm.latte'}
{block return_actions}{/block}
{block title}我的账户{/block}

{block private_js}
    <script>
        var Countdown;
        var CountdownTime = 0;
        $(function () {
            $(".submit").live("click", function () {
                var url = $('#formArticle').attr("action");
                var postData = $('#formArticle').serialize();
                $.ajax({
                    url: url,
                    type: "POST",
                    data: postData,
                    dataType: "json",
                    success: function (res) {
                        alert(res.info)
                        if (res.status == "n") {
                            return false;
                        } else {
                            location.reload();
                        }

                    }
                });
            });


            $(".get-verify").on("click", function () {
                var vcode = document.getElementById("vcode").value;
                var Vurl = document.getElementById("Vurl").value;
                var Curl = document.getElementById("Curl").value;
                var Gurl = document.getElementById("Gurl").value;

                $.ajax({
                    url: Vurl,
                    type: "GET",
                    data: {
                        vcode: vcode
                    },
                    dataType: "json",
                    success: function (resss) {
                        if (resss.status == "n") {
                            alert(resss.info);
                            return false;
                        }

                        if (CountdownTime > 0) return;
                        var userPhone = $("input[name='userPhone']").val();
                        {*var userName = $("input[name='userName']").val();*}
                        {*if (!/^1[3-9][0-9]{9}$/.test(userName)) {*}
                        {*alert("请输入正确手机号码");*}
                        {*return;*}
                        {*}*}
                        var url = Curl;
                        clearInterval(Countdown);
                        console.log(url);
                        console.log(userPhone);

                        $.ajax({
                            url: url,
                            type: "POST",
                            data: {
                                phone: userPhone
                            },
                            dataType: "json",
                            success: function (res) {
                                console.log(res);
                                if (res.status == "n") {
                                    alert(res.info);
                                    return;
                                }
                                getVerify(Gurl);
                                alert(res.info);
                                CountdownTime = 59;
                                Countdown = setInterval(function () {
                                    if (CountdownTime <= 0) {
                                        $(".get-verify").text("获取验证码");
                                        clearInterval(Countdown);
                                    } else {
                                        $(".get-verify").text(CountdownTime + "秒重新获取");
                                        CountdownTime--;
                                    }
                                }, 1000)
                            }, error: function (err) {
                                console.log(err)
                            }
                        });
                    }
                });
            });
        })


        function getVerify(url) {
            var url = url + "?r=";
            var src = url + Math.random();
            $("#imgVerify").attr("src", src);
        }

    </script>
{/block}
{block private_css}
    <style>
        .smallinput{
            width:200px;
            height:30px;
            padding:0 5px;
            margin:5px 0;
            float:left;
        }

        #getMessage{
            line-height:35px;
            display:block;
            margin-top:5px;
            margin-left:5px;
            float:left;
        }

        #getMessage:hover{
            cursor:pointer;
        }
    </style>
{/block}

{block content}
    <form id="formArticle" class="stdform" method="post" action="{$url}" onsubmit="return false">
        <table cellpadding="0" cellspacing="0" border="0" id="frmtable" class="formtable">
            <thead>
            <tr>
                <td><label>手机号码</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <input type="text" disabled class="smallinput" value="{$userPhone}" id="userPhone"/>
                            <input type="hidden" class="smallinput" value="{$userPhone}" name="userPhone"/>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>请输入右图验证码</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <input type="text" class="smallinput" id="vcode" style="float: left;"/>
                            <img src="{url('consoles_myuser_verify')}" onclick="getVerify({url('consoles_myuser_verify')})" title="看不清，换一张" id="imgVerify" style="margin-top: 5px;margin-left: 5px;height: 35px;"/>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>请输入短信验证码</label></td>
                <td>
                    <div class="field control-group">
                        <div class="input-group">
                            <input type="text" class="smallinput" name="messageCode"/>
                            <span class="get-verify" id="getMessage">获取短信验证码</span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>新密码</label></td>
                <td>
                    <div class="control-group ">
                        <div class="field input-group">
                            <input type="password" name="newPwd" class="smallinput"/>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td><label>确认密码</label></td>
                <td>
                    <div class="control-group ">
                        <div class="field input-group">
                            <input type="password" name="confirmPwd" class="smallinput"/>
                        </div>
                    </div>
                </td>
            </tr>
            </thead>
            <input id="Vurl" type="hidden" style="display:none;" value="{url("consoles_myuser_yzVcode")}"/>
            <input id="Curl" type="hidden" style="display:none;" value="{url('consoles_myuser_sendVerify')}"/>
            <input id="Gurl" type="hidden" style="display:none;" value="{url('consoles_myuser_verify')}"/>
    </form>
{/block}